<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>门店管理</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="css/homePage.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/flexible.css">
	<link rel="stylesheet" href="css/vant.css">
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/vue/qs.js"></script>
	<script src="js/flexible.js"></script>
	<script src="js/glabe.js"></script>
	<script src="js/jquery.md5.js"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/vue/axios.js"></script>
	<script src="js/vue/vant.js"></script>
	<script src="js/areaList.js"></script>
	<style>
		.remark {
			font-size: 14px;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1)
		}

		.width75 {
			margin-left: 0.347rem;
			width: 75%;
		}

		.width75 textarea {
			width: 100%;
			border: 1px solid #f3f3f3;
			padding: 0.1rem;
			outline: none;
			resize: none;
		}

		.upload {
			width: 1.44rem;
			display: block;
			height: 1.44rem !important;
			position: absolute;
			top: 11px;
			left: 50%;
			margin-left: -1rem;
			width: 2rem;
			height: 2rem;
			opacity: 0;
		}

		.input-file-box {
			padding-top: 0.3rem;
			/* border: 1px solid gray; */
			width: 1.5rem;
			height: 1.5rem;
			position: relative;
			text-align: center;
			border-radius: 8px;
			display: inline-block;
		}

		/*文字描述*/
		.input-file-box>img {
			display: block;
			width: 1.5rem;
			height: 1.5rem;
			position: absolute;
			top: 0px;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			color: gray;
		}

		/*input框*/
		.input-file-box #uploadfile {
			opacity: 0;
			width: 1.5rem;
			height: 1.5rem;
			cursor: pointer;
		}

		#img-box {
			margin-top: 0.3rem;
			float: left;
		}

		#img-box img {
			display: inline-block;
			float: left;
		}

		.closes {
			position: relative;
			width: 2.5rem;
			height: 2.5rem;
			float: left;
			margin-right: 0.3rem;
		}

		.close {
			position: absolute;
			right: 0rem;
			top: 0;
		}

		.van-cell__value--alone {
			color: rgba(153, 153, 153, 1);
			;
		}

		.sub_btn_style {
			width: 100%;
			height: 40px;
			line-height: 40px;
			color: #fff;
			text-align: center;
			font-size: 16px;
			background: #2861FF;
		}
	</style>
</head>

<body>
	<div class="customer_type" id="app">
		<form action="" method="">
			<div style="position: relative;" class="upload_img">
				<img :src="logoImg">
				<input type="file" class="upload" onchange="uploadImg(this)">
			</div>
			<table class="customer_type_table">
				<tbody>
					<tr class="clearfix">
						<td><span>门店名称</span></td>
						<td>
							<input type="text" name="" placeholder="请输入门店名称" :value="Vname" class="customername" @blur="blur"
								ref="Vname">
						</td>
					</tr>
					<tr class="clearfix">
						<td><span>门店地址</span></td>
						<td style="position: relative;left: 24px;">
							<!-- <select name="" id="maintainersele">
								<option value="">请选择门店地址</option>
							</select> -->
							<van-cell is-link @click="showPopup">{{Province_c}},{{City_c}},{{County_c}}</van-cell>
							<van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
								<van-area :area-list="areaList" @confirm="confirm" @cancel="cancel" />
							</van-popup>
						</td>
					</tr>
					<tr class="clearfix">
						<td><span>门店电话</span></td>
						<td>
							<input type="text" name="" placeholder="请输入员工电话" :value="Vtel" class="customerphone" @blur="blur"
								ref="Vtel">
						</td>
					</tr>
					<tr class="clearfix">
						<td><span>店长电话</span></td>
						<td>
							<input type="text" name="" placeholder="请输入员工电话" :value="Phone" class="customerphone" @blur="blur"
								ref="Phone">
						</td>
					</tr>
					<tr class="clearfix">
						<td><span>详细地址</span></td>
						<td>
							<input type="text" name="" placeholder="请输入详细地址" :value="Address" class="customerphone" @blur="blur"
								ref="Address">
						</td>
					</tr>
				</tbody>
			</table>
			<div class="remark" style="padding-left:0.347rem;">
				<label class="lf">门店介绍</label>
				<div class="lf width75">
					<textarea rows="6" placeholder="请输入备注信息" :value="Info" @blur="blur" ref="Info"></textarea>
				</div>
			</div>
			<div class="photo remark" style="padding-left:0.347rem;display: inline-block;">
				<p style="display: -webkit-inline-box;">门店相册</p>				
				<van-uploader v-model="Plist" multiple :max-count="5" :after-read="afterRead" :before-delete="delImg"/>
			</div>
		</form>
		<div class="sub_btn_div">
			<!-- <input type="submit" name="" value="" class="sub_btn" readonly="readonly"> -->
			<!-- <div  class="sub_btn" @click="submit()"></div> -->
			<div class="sub_btn_style" @click="submit">提交</div>
		</div>
	</div>
</body>
<script>
	var length_img = 0;
	// window.onload = function () {
	// 	var input = document.getElementById("uploadfile");
	// 	// 当用户上传时触发事件
	// 	input.onchange = function () {
	// 		readFile(this);
	// 	}
	// 	//处理图片并添加都dom中的函数
	// 	var readFile = function (obj) {
	// 		// 获取input里面的文件组
	// 		var fileList = obj.files;
	// 		//对文件组进行遍历，可以到控制台打印出fileList去看看
	// 		length_img = parseInt(fileList.length) + parseInt(length_img);
	// 		for (var i = 0; i < fileList.length; i++) {
	// 			var reader = new FileReader();
	// 			reader.readAsDataURL(fileList[i]);
	// 			// 当文件读取成功时执行的函数
	// 			reader.onload = function (e) {
	// 				var html = '<div class="closes clearfix">' +
	// 					'<img src="' + this.result + '" />' +
	// 					'<p class="close"><img src="images/close.png"></p>' +
	// 					'</div>';
	// 				$(".input-file-box").before(html);
	// 			}
	// 		}
	// 		if (length_img >= 5) {
	// 			$(".input-file-box").hide();
	// 		}
	// 	}

	// }


	function uploadImg(obj) {
		var input = document.getElementsByClassName("upload");
		// 当用户上传时触发事件
		readFile(obj);
	}
	//处理图片并添加都dom中的函数
	var base64 = ""
	var readFile = function (obj) {
		// console.log(obj)
		// 获取input里面的文件组
		// console.log(obj.files);
		var fileList = obj.files;
		//对文件组进行遍历，可以到控制台打印出fileList去看看
		for (var i = 0; i < fileList.length; i++) {
			var reader = new FileReader();
			reader.readAsDataURL(fileList[i]);
			// 当文件读取成功时执行的函数
			reader.onload = function (e) {
				$(".upload_img img").attr("src", this.result)
				base64 = this.result
				//console.log(this.result)

				// console.log(base64)

			}
		}
	}
	$(".photo").on('click', '.close', function () {
		$(this).parent().remove();
		if ($(".img-box>div").length >= 6) {
			$(".input-file-box").hide();
		} else {
			$(".input-file-box").show();
		}
	})

	var app = new Vue({
		el: '#app',
		data() {
			return {
				show: false,
				logoImg: '', //logo图
				Vname: '', //场馆名称
				Vtel: '', //场馆电话
				Address: '', //详细地址
				Info: '', //场馆介绍
				Plist: [], //场馆相册 数组
				Pimg: '',
				Phone: '', //店长电话
				areaList: areaList, //地区列表Json数据
				Province_c: '', //省名称
				City_c: '', //市名称
				County_c: '', //县名称
			}
		},

		created() {
			this.getInfo();
		},
		mounted() {

		},
		methods: {
			//获取数据
			getInfo(){
				console.log('1111');
				axios.get("mobileapi/boss/venueset.php?act=hinfo").then(res => {
					
					if(res.data.code == 200){
						this.logoImg = res.data.data.Logo
						this.Vname = res.data.data.Vname
						this.Vtel = res.data.data.Vtel
						this.Address = res.data.data.Address
						this.Info = res.data.data.Info
						
						this.Phone = res.data.data.Phone
						this.Province_c = res.data.data.Province_c
						this.City_c = res.data.data.City_c
						this.County_c = res.data.data.County_c
						let arr = [];
						console.log(this.Plist);
						res.data.data.Plist.forEach(item=>{
							let obj = {
								url:item
							};
							arr.push(obj);
						});
						this.Plist = arr;
					}else{
						vant.Toast(res.data.msg);
					}	
				}).catch(err => {
					// vant.Toast('请求发送失败，请重试');
				})
			},
			showPopup() {
				this.show = true;
			},
			confirm(e) {
				// console.log(e)
				this.Province_c = e[0].name
				this.City_c = e[1].name
				this.County_c = e[2].name
				this.show = false
			},
			cancel() {
				this.show = false;
			},
			submit() {
				//场馆设置修改提交-H5
				const from = {
					"Vname": this.Vname,
					"Vtel": this.Vtel,
					"Province": this.Province_c,
					"City": this.City_c,
					"County": this.County_c,
					"Address": this.Address,
					"Info": this.Info,
				}
				let froms = JSON.stringify(from);
				let sign = md5(froms);
				let params = {
					from: froms,
					sign,
					picdate: base64
				}

				axios.post('mobileapi/boss/venueset.php?act=hinfo_editgo', Qs.stringify(params)).then(res => {
					if(res.data.code == 200){
						vant.Toast('修改提交成功');
					}else{
						vant.Toast(res.data.msg);
					}
				}).catch(err => {
					vant.Toast('请求发送失败，请重试');
				})	
			},
			blur() {
				this.Vname = this.$refs.Vname.value
				this.Vtel = this.$refs.Vtel.value
				this.Phone = this.$refs.Phone.value
				this.Address = this.$refs.Address.value
				this.Info = this.$refs.Info.value
			},
			afterRead(file) {
				// this.Pimg = file.content
				console.log(file);
				//长传的图片
				let img = file.content;
				let obj = {
					picdate:file.content
				}
				axios.post('mobileapi/boss/venueset.php?act=add_pic',Qs.stringify(obj)).then(res=>{
					if(res.data.code == 200){
						//图片上传成功
						vant.Toast('图片上传成功');
					}else{
						vant.Toast(res.data.msg);
					}
				}).catch(err=>{
					vant.Toast('请求发送失败，请重试1')
				})
			},
			delImg(file,detail){
				let obj = {
					key:detail.index
				}
				axios.post('mobileapi/boss/venueset.php?act=piclist_edit', Qs.stringify(obj)).then(res => {
					if(res.data.code == 200){
						vant.Toast('图片删除成功');
						//重新获取数据
						this.getInfo();
					}else{
						vant.Toast(res.data.msg);
						return false;
					}
				}).catch(err => {
					vant.Toast('请求发送失败，请重试2');
				})
			}
		}
	})
</script>

</html>